<template>
	<view class="container">
		<uni-list>
			<template v-for="(v,i) in mineList" :key="i">
				<uni-list-item showArrow :showExtraIcon="true" :extra-icon="{type:v.icon,size:'32'}"
					@click="goPage(v.path)" :title="v.title" clickable  :right-text="maskPhoneNumber(v.number,userStore.userInfo.tel)">
				</uni-list-item>
			</template>
		
		</uni-list>
		<!-- 内容 -->
		<view class="body">
			<view class="content">
				
				<!-- /static/user.jpg -->
				<view class="user_content">
					<text>头像</text>
					<view class="user_use">
						<image class="profile_picture" :src="userImg" mode=""></image>
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>
				<view class="user_content">
					<text>昵称</text>
					<view class="user_use">
						<view class="gray">
							微信用户
						</view>
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>
				<view class="user_content">
					<text>姓名</text>
					<view class="user_use">
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>
				<view class="user_content">
					<text>证件类型</text>
					<view class="user_use">
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>
				<view class="user_content">
					<text>证件号码</text>
					<view class="user_use">
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>
				<view class="user_content">
					<text>会员码</text>
					<view class="user_use">
						<image src="/static/tocode.png" class="code" mode=""></image>
						<uni-icons type="right" color="gray" size="15"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view :class="['btn',btnFlag?'checkBtn':'']">
				修改信息
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 控制底部
	const btnFlag = ref(false)
	// 头像
	const userImg = ref('/static/userheader.png')
	
	// 
	const mineList = reactive([{
		icon: 'contact',
		title: '常用联系人',
		number: '',
		reditor: false,
		path: "/pagesD/contacts/contacts"
	}, 
	// {
	// 	icon: 'download-filled',
	// 	title: '收货地址',
	// 	number: '',
	// 	reditor: false,
	// 	path: ""
	// }, 
	{
		icon: 'phone',
		title: '手机',
		number: '188****1111',
		reditor: true,
		path: "/pagesC/mytel"
	}, {
		icon: 'chatboxes',
		title: '客服',
		number: '',
		reditor: false,
		path: "/pagesD/customer/customer"
	}])
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			overflow: auto;
			padding: 20rpx 40rpx;
			box-sizing: border-box;

			.content {
				border-radius: 16rpx;
				background: #fff;
				padding: 20rpx;

				.user_content {
					display: flex;
					padding: 10rpx 0;
					justify-content: space-between;
					align-items: center;
					min-height: 90rpx;
					box-sizing: border-box;

					.user_use {
						display: flex;
						align-items: center;


						.profile_picture {
							width: 100rpx;
							height: 100rpx;
							border-radius: 10rpx;
						}

						.gray {
							color: gray;
						}

						.code {
							width: 60rpx;
							height: 60rpx;
						}

						.uni-icons {
							margin-left: 20rpx;
						}
					}
				}
			}

		}

		.footer {
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;

			.btn {
				color: #fff;
				width: 100%;
				border-radius: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background: #c5c3c3;
				font-size: 40rpx;
			}

			.checkBtn {
				background: orangered;
			}
		}
	}
</style>